<template>
  <a-modal
    :title="title"
    :visible="openDialog"
    :maskClosable="false"
    :destroyOnClose="true"
    @cancel="mainDialogClose()"
  >
    <!-- @cancel="mainDialogClose('commonForm')" -->
    <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
      <div class="uploadBox">
        <div><a-icon type="plus" /></div>
        <div>上传文件</div>
      </div>
    </a-upload>

    <template slot="footer">
      <a-button type="primary" :disabled="fileList.length === 0" @click.stop="handleUpload">
        <a-icon type="confirm" />
        确认上传
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import api from '@/api/deviceInfo';

export default {
  name: 'detailPartDialog',
  props: {
    openDialog: Boolean,
    title: String,
  },
  components: {},
  data() {
    return {
      // username: '',
      // role: '',
      // compId: '',
      // compType: '',
      fileList: [],
      upLoadFile: '',
    };
  },
  watch: {
    openDialog: {
      immediate: false,
      handler: async function(newVal, oldVal) {
        this.fileList = [];
      },
    },
  },
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      if (this.fileList.length < 1) {
        this.fileList = [...this.fileList, file];
      }
      return false;
    },
    async handleUpload() {
      let fd = new FormData();
      let file = this.fileList[0];
      let fileName = file.name;
      fd.append('file', file);
      let res = await api.logInfoUpload(fd);
      if (res.MsgCode != 0) {
        this.$message.error('上传失败');
        return;
      }

      let { url, md5 } = res.Data;

      this.$emit('update:openDialog', false);
      // this.$emit('closeDialogRefreshData', url);
      this.$emit('closeDialogRefreshData', { fileName, url, md5 });
    },

    mainDialogClose(formName) {
      this.$emit('update:openDialog', false);
      // this.$emit('closeDialogRefreshData', '');
    },
  },
  mounted() {},
  created() {},
};
</script>

<style scoped>
.uploadText {
  width: 100%;
  text-align: center;
  padding: 4px;
  border: 1px solid #ebedf0;
}

/deep/ .ant-upload.ant-upload-select.ant-upload-select-text {
  width: 100%;
}

.uploadBox {
  width: 100%;
  height: 80px;
  background-color: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-size: 18px;
  color: #9d9d9d;
  line-height: 36px;
}
</style>
